import React, { useState, useMemo } from 'react';
import './index.less';
import MyTabbar from '@/components/MyTabbar/MyTabbar';
import { useSelector, useDispatch } from 'umi';
import { Button, Checkbox, Stepper, Modal } from 'antd-mobile';
export default function Page() {
  const dispatch = useDispatch();
  const cart = useSelector(state => state.cart);
  const [delState, setDelState] = useState(false);

  // 修改商品购买数量
  const changeNum = (key: string, number: number) => {
    dispatch({
      type: 'cart/changeItemNum',
      params: {
        key,
        number
      }
    })
  }
  // 修改商品选中状态
  const changeItemSelected = (key: string, selected: boolean) => {
    console.log(key, selected);
    dispatch({
      type: 'cart/changeItemSelected',
      params: {
        key,
        selected
      }
    })
  }
  // 删除商品
  const delItem = () => {
    // 弹出确认框
    Modal.confirm({
      title: '删除?',
      content: '此操作会彻底删除该商品,确定继续吗?',
      onConfirm: () => {
        // 得到所有 需要商品商品key
        const delItemsKeys: any[] = [];
        cart.items.forEach(item => {
          if (item.selected) {
            delItemsKeys.push(item.key)
          }
        })
        dispatch({
          type: 'cart/delItem',
          params: {
            key: delItemsKeys.join(',')
          }
        })
        setDelState(false)
      }
    })
  }
  // 全选状态
  const allChecked = useMemo(() => {
    return cart.items.every(item => item.selected)
  }, [cart.items])
  // 点击全选改变商品选中状态
  const allCheckedChange = (selected: boolean) => {
    const keys: any[] = [];
    cart.items.forEach(item => {
      keys.push(item.key);
    })
    dispatch({
      type: 'cart/changeItemSelected',
      params: {
        key: keys.join(','),
        selected
      }
    })
  }
  return (
    <div className='cart-page'>
      <div className="cart-head">
        <span>
          数量: {cart.number}

        </span>
        <span onClick={
          () => {
            setDelState(!delState)
          }
        }>
          {delState ? '删除' : '管理'}
        </span>
      </div>
      <div className="cart-container">
        {
          cart.items.map(item => (
            <div key={item.goodsId} className="item">
              <Checkbox checked={item.selected} onChange={
                (checked) => {
                  changeItemSelected(item.key, checked)
                }
              } />
              <img src={item.pic} alt="" />
              <div className="item-info">
                <h5>{item.name}</h5>
                <p>{item.price}</p>
                <Stepper onChange={
                  (value) => {
                    changeNum(item.key, value)
                  }
                } min={1} defaultValue={item.number} />
              </div>
            </div>
          ))
        }
      </div>
      <div className="submit-bar">
        <span>
          全选： <Checkbox
            checked={allChecked}
            onChange={
              (checked) => {
                allCheckedChange(checked)
              }
            }
          />
        </span>
        <span>
          总价格:{cart.price}
        </span>
        {
          delState
            ?
            <Button size='large' color='danger' onClick={
              delItem
            }>删除</Button>
            :
            <Button size='large' color='danger'>提交订单</Button>
        }

      </div>
      <MyTabbar />
    </div>
  );
}
